<template>
  <div class="home">
    <el-container class="home-container">
      <!-- 头部 -->
      <el-header class="header">
        <div class="logo-title-box">
          <div>
            <img src="../assets/小兔.png" alt="" />
          </div>
          <div class="title-box"><span>电商后台管理系统</span></div>
        </div>

        <div class="button-box">
          <el-button type="info" @click="logout">登出</el-button>
        </div>
      </el-header>
      <el-container class="home-subject">
        <!-- 侧边栏 -->
        <el-aside width="200px" class="aside">
            <!-- 折叠按钮 -->
            <div class="aside-butn-box"><button @click="trigger">|||</button></div>
          <!-- 侧边栏导航区 -->
          <el-menu
            :default-active="path"
            class="el-menu-vertical-demo"
            background-color="#9accff"
            text-color="#000000"
            active-text-color="#ffd04b"
            unique-opened
            :collapse=istrigger
            router
            
          >
           <!-- 一级菜单 -->
            <el-submenu :index="item.id+''" v-for="item in menuslist" :key="item.id" :default-active='item.id'>
              <template slot="title">
                 <i :class="iconlist[item.id]" class="i"></i>
                <span>{{item.authName}}</span>
              </template>
              <!-- 二级菜单 -->
                <el-menu-item :index="'/'+itemchildren.path+''" v-for="itemchildren in item.children" :key="itemchildren.id" @click="setpath(itemchildren.path)">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{itemchildren.authName}}</span>
                </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 内容区 -->
        <el-main class="main">
          <transition name="slide-fade">
          <router-view v-show="ishow"></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
         ishow:true,
         menuslist:[],
        //  侧边栏图标
         iconlist:{
             '125':'el-icon-s-custom',
             '103':'el-icon-key',
             '101':'el-icon-s-goods',
             '102':'el-icon-s-claim',
             '145':'el-icon-s-data'
         },
         istrigger : false,
         path:''
             
         
    };
  },
  created(){
       this.getmenu()
       this.getpath()
  },
  methods: {
    //   登出
    logout() {
      const token = window.sessionStorage.getItem("token");
      if (token) {
        window.sessionStorage.clear("token");
        // 路由跳转
        this.$router.replace("/Login");
      }
    },
    // 获取菜单
     async  getmenu(){
         const{data : menu} =  await this.$http.get('menus')
         if(menu.meta.status===200){
             this.menuslist=menu.data
         }else{
            return menu.meta.msg
         } 
    },
    // 是否水平折叠收起菜单
    trigger(){
       this.istrigger = !this.istrigger
    },
    // 保存path Elmente ui 提供的属性 用于跳转组件 在menu 加router 属性 根据 菜单 index:'路径'跳转
    setpath(path){
      window.sessionStorage.setItem('path','/'+path)
    },
    // 获取path
    getpath(){
      this.path=window.sessionStorage.getItem('path')
    }
  },
};
</script>

<style scoped>
.home {
  height: 100%;
  width: 100%;
}
.home-container {
  height: 100%;
  width: 100%;
}
/* 头部 */
.header {
  display: flex;
  background-color: #9accff;
}
.logo-title-box {
  display: flex;
  flex: 5;
}
/* log图片 */
.header img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
/* 标题 */
.header .title-box span {
  position: relative;
  top: 20%;
  padding: 0 10px;
  font-size: 30px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
/* 登出按钮 */
.button-box {
  padding-top: 11px;
}
/* 头部 */
/* 主体 */
.home-subject {
  border-top: 1px solid #909399;
}
.aside {
  background-color: #9accff;
  border-right: none;
}

.aside-butn-box{
    width: 100%;
}
.aside-butn-box>button{
    width: 100%;
    background-color: #9accff;
    border: 0;
}
.main {
  background-color: #f2f6fc;
}
 .i{
    margin-right: 30px;
}
/* 动画 */
.slide-fade-enter-active {
  transition: all 1s ease;
}
/* .slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
} */
.slide-fade-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>